<template>
  <div class="showcase-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="gradient-text">风采展示</h1>
        <p>记录国护人的点点滴滴</p>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="section-container">
      <!-- 标签页 -->
      <el-tabs v-model="activeTab" class="custom-tabs">
        <!-- 训练风采 -->
        <el-tab-pane label="训练风采" name="training">
          <div class="showcase-filter">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleDateChange">
            </el-date-picker>
            <el-input
              placeholder="搜索关键词"
              v-model="searchKeyword"
              prefix-icon="el-icon-search"
              @input="handleSearch">
            </el-input>
          </div>

          <div class="timeline-container">
            <el-timeline>
              <el-timeline-item
                v-for="item in filteredTrainingItems"
                :key="item.id"
                :timestamp="item.date"
                placement="top">
                <div class="timeline-card glass-effect">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                  <div class="image-grid">
                    <div class="image-item" v-for="(img, index) in item.images" :key="index">
                      <el-image
                        :src="img.url"
                        :preview-src-list="item.images.map(img => img.url)"
                        fit="cover">
                      </el-image>
                    </div>
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>

        <!-- 生活风采 -->
        <el-tab-pane label="生活风采" name="life">
          <div class="showcase-filter">
            <!-- 与训练风采相同的筛选组件 -->
          </div>
          <div class="timeline-container">
            <el-timeline>
              <!-- 生活风采的时间线内容 -->
            </el-timeline>
          </div>
        </el-tab-pane>

        <!-- 活动风采 -->
        <el-tab-pane label="活动风采" name="events">
          <div class="showcase-filter">
            <!-- 与训练风采相同的筛选组件 -->
          </div>
          <div class="timeline-container">
            <el-timeline>
              <!-- 活动风采的时间线内容 -->
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowcasePage',
  data() {
    return {
      activeTab: 'training',
      dateRange: '',
      searchKeyword: '',
      trainingItems: [
        {
          id: 1,
          date: '2024-03-01',
          title: '早操训练',
          description: '清晨6点，国旗护卫队队员们准时集合，开始一天的基础训练。',
          images: [
            { url: 'https://img.zcool.cn/community/01639e5d8b1927a8012060be0f0ddb.jpg' },
            { url: 'https://img.zcool.cn/community/01e0bc5d8b1927a8012060be78795f.jpg' }
          ]
        },
        {
          id: 2,
          date: '2024-03-02',
          title: '队列训练',
          description: '下午的专项训练时间，队员们认真练习队列动作。',
          images: [
            { url: 'https://img.zcool.cn/community/01639e5d8b1927a8012060be0f0ddb.jpg' }
          ]
        }
        // 更多训练记录...
      ]
    }
  },
  computed: {
    filteredTrainingItems() {
      let items = this.trainingItems

      // 日期筛选
      if (this.dateRange && this.dateRange.length === 2) {
        items = items.filter(item => {
          const itemDate = new Date(item.date)
          return itemDate >= this.dateRange[0] && itemDate <= this.dateRange[1]
        })
      }

      // 关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        items = items.filter(item =>
          item.title.toLowerCase().includes(keyword) ||
          item.description.toLowerCase().includes(keyword)
        )
      }

      return items
    }
  },
  methods: {
    handleDateChange(val) {
      this.dateRange = val
    },
    handleSearch(val) {
      this.searchKeyword = val
    }
  }
}
</script>

<style scoped>
.showcase-page {
  min-height: calc(100vh - var(--header-height));
}

.page-header {
  height: 300px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.showcase-filter {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.timeline-container {
  margin-top: 40px;
}

.timeline-card {
  padding: 20px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.image-item {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.el-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.image-item:hover .el-image {
  transform: scale(1.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .showcase-filter {
    flex-direction: column;
  }
  
  .page-header {
    height: 200px;
  }
}
</style> 